<template>
  <div>
    <div class="OtherInformation">
      <div class="MyNeed-title">
        <span>信贷金融管理</span>

      </div>
      <div class="mt-10 card-box">
        <a-form-model layout="inline" class="clearfix" :model="queryForm">
          <a-form-model-item label="关键字：">
            <a-input placeholder="请输入服务产品名称" v-model="params.form.productName" />
          </a-form-model-item>
          <a-form-model-item label="机构名称：">
            <a-input placeholder="请输入服务商名称" v-model="params.form.pubInstitution" />
          </a-form-model-item>
          <a-form-model-item label="联系人：">
            <a-input placeholder="请输入联系人" v-model="params.form.contact" />
          </a-form-model-item>
          <a-form-model-item label="审核状态：">
            <a-select :default-value="null" style="width: 120px" v-model="params.form.approvalStatus">
              <a-select-option :value="null">全部</a-select-option>
              <a-select-option :value="0">审核中</a-select-option>
              <a-select-option :value="1">已通过</a-select-option>
              <a-select-option :value="2">未通过</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="更新时间：">
            <a-range-picker v-model="updateTimeBetween" :placeholder="['开始日期', '结束日期']">
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
          </a-form-model-item>

          <a-form-model-item label="截止日期：">
            <a-range-picker v-model="closeDateBetween" :placeholder="['开始日期', '结束日期']">
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
          </a-form-model-item>
          <div class="f-right mt-5">
            <a-button class="mr-8" style="color:#909399;" @click="reset">重置</a-button>
            <a-button type="primary" @click="getList">搜索</a-button>
          </div>
          <!-- <a-button class="f-right mt-5" type="primary" @click="SearchZZList">搜索</a-button>
          <a-button class="f-right mr-10 mt-5" style="color:#909399;" @click="ZScleardata">重置</a-button> -->
        </a-form-model>
      </div>

      <div class="action">
        <a-table :scroll="{ x: 1500 }" :columns="columns" :data-source="dataList" :pagination="params"
          :rowKey="record => record.id">
          <div slot="approvalStatus" slot-scope="text">
            <a-tag v-if="text == 0" color="orange">审核中</a-tag>
            <a-tag v-else-if="text == 1" color="green">已通过</a-tag>
            <a-tag v-else-if="text == 2" color="red">未通过</a-tag>
          </div>
          <!-- <div slot="applicationStatus" slot-scope="text">
            <a-tag v-if="text == 1" color="orange">服务初审</a-tag>
            <a-tag v-else-if="text == 2" color="green">资质审核</a-tag>
            <a-tag v-else-if="text == 3" color="blue">资料审核</a-tag>
          </div> -->
          <div slot="contractSt" slot-scope="text">
            <a-tag color="gray" v-if="text == null">未合作</a-tag>
            <a-tag color="green" v-if="text == 1">达成合作</a-tag>
            <a-tag color="orange" v-if="text == 2">合作取消</a-tag>
          </div>

          <!-- <a slot="name" slot-scope="text">{{ text }}</a> -->
          <span slot="action" slot-scope="text,record">
            <a @click="handleDetail(record, 'detail')">查看详情</a>
            <!-- v-if="record.approvalStatus == 2" -->
            <a v-if="record.approvalStatus == 2" @click="handleEdit(record, false)" class="ml-24">编辑</a>
            <a v-if="record.contractSt" @click="handleEvaluate(record)" class="ml-24">评价</a>
          </span>
        </a-table>
      </div>
    </div>
    <!-- 他人的留言模态框 -->
    <a-modal v-model="showEvaluate" title="添加评价" :width="800">
      <a-form-model class="clearfix" :model="evaluateForm" ref="evaluateForm" :rules="rules">
        <a-form-model-item label="评分" prop="score">
          <a-rate v-model="evaluateForm.score"></a-rate>
        </a-form-model-item>

        <a-form-model-item label="评价内容" prop="content">
          <a-textarea v-model="evaluateForm.content" :rows="4" placeholder="请输入评价内容" />
        </a-form-model-item>
      </a-form-model>
      <template slot="footer">
        <a-button type="primary" @click="submitEvaluate"> 提交 </a-button>
        <a-button @click="closeEvaluate"> 关闭 </a-button>
      </template>

    </a-modal>

  </div>
</template>

<script>





import { getCookiesUserInfo, } from "@/utils/auth";
import { listCreApplication } from "@/apis/cre/creApplication";
import { parseTime, lasetTime, formatDate, startTime } from "@/utils/common";
import { creEvaluateAdd } from "@/apis/cre/creEvaluate";
const columns = [
  {
    title: "序号",
    dataIndex: "idNum",
    width: 80,
    align: "center",
    customRender: (text, record, index) => `${index + 1}`, // 显示每一行的序
    fixed: "left",
  },
  {
    title: "服务名称",
    dataIndex: "productName",
    align: "center",
    width: 200,
    fixed: "left",
  },
  {
    title: "金融机构名称",
    dataIndex: "pubInstitution",
    align: "center",
    width: 200,
  },
  {
    title: "申请日期",
    dataIndex: "applicationDate",
    align: "center",
    customRender: function (text) {
      return formatDate(text)
    },
    width: 200,
  },
  {
    title: "更新时间",
    dataIndex: "updateTime",
    align: "center",
    width: 200,
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    align: "center",
    width: 200,
  },
  // {
  //   title: "申请状态",
  //   dataIndex: "applicationStatus",
  //   align: "center",
  //   scopedSlots: { customRender: "applicationStatus" },
  //   width: 200,
  // },
  {
    title: "审核状态",
    dataIndex: "approvalStatus",
    align: "center",
    scopedSlots: { customRender: "approvalStatus" },
    width: 200,

  },
  {
    title: "合作状态",
    dataIndex: "contractSt",
    align: "center",
    scopedSlots: { customRender: "contractSt" },
    width: 200,
  },



  {
    title: "截止日期",
    dataIndex: "closeDate",
    align: "center",
    customRender: function (text) {
      return parseTime(text, '{y}-{m}-{d}')
    },
    width: 200,
  },
  {
    title: "联系人",
    dataIndex: "contact",
    align: "center",
    width: 200,
  },
  {
    title: "联系电话",
    dataIndex: "contactNumber",
    align: "center",
    width: 200,
  },
  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    fixed: "right",
    width: 250,
    scopedSlots: { customRender: "action" },
  },
];





export default {
  data () {
    return {
      showEvaluate: false,
      queryForm: {},
      dataList: [],
      columns,
      updateTimeBetween: [],
      closeDateBetween: [],
      params: {
        total: 0,
        pageSize: 10,
        current: 1,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showTotal: (total) => `共有 ${total} 条数据`,
        form: {
          // isOrderDesc: true,
          pageNum: 1,
          pageSize: 10,
          productName: null, //产品名称
          contact: null,//联系人
          userId: JSON.parse(getCookiesUserInfo()).userId,
          pubInstitution: null, // 服务商名称
          updateTimeStart: null,
          updateTimeEnd: null,
          closeDateStart: null,
          closeDateEnd: null,
        },
        showQuickJumper: true,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) => this.pageChange(current, pageSize),
        onChange: (page, pageSize) => this.pageChange(page, pageSize),
      },
      evaluateForm: {
        productId: '',
        score: 0,
        content: '',
        pubUserId: JSON.parse(getCookiesUserInfo()).userId,
      },
      rules: {
        score: [
          // { required: true, message: '请输入评分', trigger: ["change", 'blur'], },
          { type: 'number', required: true, min: 1, max: 5, message: '请输入评分', trigger: ["change", 'blur'] }
          // {
          //   required: true,
          //   validate: (rule, value, callback) => {
          //     console.log('checkScore', value);

          //     if (value <= 0) {
          //       return callback(new Error("请输入分数"));
          //     } else {
          //       callback();
          //     }
          //   },
          //   trigger: ["change", 'blur'],
          // }
        ],
        content: [
          {
            required: true,
            message: "请输入评价",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created () {
    this.getList()
  },
  methods: {
    submitEvaluate () {
      this.$refs["evaluateForm"].validate((valid) => {
        if (valid) {
          console.log('this.evaluateForm', this.evaluateForm);
          creEvaluateAdd(this.evaluateForm).then(response => {
            // this.$modal.msgSuccess("操作成功");
            this.$message.success({ content: '操作成功' });
            this.closeEvaluate()
          });

        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    closeEvaluate () {
      this.showEvaluate = false
      this.evaluateForm = {
        productId: '',
        score: 0,
        content: '',
        pubUserId: JSON.parse(getCookiesUserInfo()).userId,
      }
    },
    handleEvaluate (row) {
      this.showEvaluate = true
      this.evaluateForm.productId = row.productId
    },
    async getList () {
      if (this.updateTimeBetween.length > 0) {
        console.log('updateTimeBetween[1]', lasetTime(this.updateTimeBetween[1]));

        this.params.form.updateTimeStart = startTime(this.updateTimeBetween[0])
        this.params.form.updateTimeEnd = lasetTime(this.updateTimeBetween[1])
        // this.queryParams.updateTimeEnd = this.updateTimeBetween[1]
      }
      if (this.closeDateBetween.length > 0) {
        this.params.form.closeDateStart = startTime(this.closeDateBetween[0])
        this.params.form.closeDateEnd = lasetTime(this.closeDateBetween[1])
        // this.queryParams.closeDateEnd = this.closeDateBetween[1]
      }


      const res = await listCreApplication(this.params.form)
      console.log('res', res.rows);
      this.dataList = res.rows
      this.params.total = res.total

    },
    reset () {
      this.params.form.pageNum = 1
      this.params.form.productName = null //产品名称
      this.params.form.contact = null//联系人
      this.params.form.userId = JSON.parse(getCookiesUserInfo()).userId
      this.params.form.pubInstitution = null // 服务商名称
      this.params.form.updateTimeStart = null
      this.params.form.updateTimeEnd = null
      this.params.form.closeDateStart = null
      this.params.form.closeDateEnd = null
      this.updateTimeBetween = []
      this.closeDateBetween = []
      this.getList()

    },
    pageChange (page, pageSize) {
      this.params.form.pageNum = page
      this.params.form.pageSize = pageSize
      this.getList()
    },
    handleDetail (row, flg) {
      this.$router.push({
        path: '/usercenter/CreditFinancialDetail',
        query: {
          id: row.id,
          companyId: row.companyId,

          flg
        }
      })
    },

    handleEdit (row, flg) {
      this.$router.push({
        path: '/usercenter/CreditFinancialEdit',
        query: {
          id: row.id,
          companyId: row.companyId,
          productId: row.productId,
          flg
        }
      })
    },

  }
};
</script>

<style lang="less" scoped>
.OtherInformation {
  padding: 17px 24px;
  background: #fff;

  .MyNeed-title {
    &:nth-child(1) {
      font-size: 22px;
      color: #303133;
    }

    .add-btn {
      margin-left: 16px;
      width: 60px;
      height: 32px;
      background-color: #ffffff;
      border-radius: 4px;
    }
  }

  .card-box {
    padding: 16px 19px;
    background-color: #f5f7fa;
    border-radius: 4px;
    margin-bottom: 24px;
  }

  .action {
    span {
      a {
        font-size: 14px;
        color: #188af1;
      }
    }
  }
}

// ::v-deep .ant-modal-content {
//   border-radius: 32px;
//   border: solid 6px #188af1;
// }
// ::v-deep .ant-modal-header {
//   height: 60px;
//   background-color: #2a51bc;
//   border-radius: 24px 24px 0px 0px;
//   text-align: center;
//   display: none;
// }
// ::v-deep .ant-modal-title {
//   color: #fff;
//   font-size: @font26;
// }
// ::v-deep .ant-modal-footer {
//   margin: 0 24px;
//   border-top: 0px solid #e8e8e8;
// }
.industrymode {
  .title {
    text-align: center;
    font-size: 24px;
  }

  .info_details {
    font-size: 14px;

    p {
      margin-bottom: 5px;
      padding: 0 20px;
    }

    .item_lable {
      display: inline-block;
      width: 80px;
      text-align: right;
      margin-right: 10px;
      color: #333;
    }

    .item_contant {
      color: #666;
    }
  }
}
</style>